Visual lab

Feature · courier-sync

Courier sync

Push local files to the platform from the terminal and watch them land on the live project.

shipped 4 variants On the board →
v1

Terminal stream

loop runs on screen

The push transcript lands line by line, the cassette upload bar fills, and the deploy line confirms. Motion is the story: nothing in the frame moves except what the terminal is saying.

views/components/visuals/courier-sync/v1.html

Static · three placements

Bento card · 320px Static
Courier — Push Fig. 01

$ courier push

Bundling views/ and public/…

↑ views/canopy/hero.canvas

↑ public/styles/global.css

Uploading cassette…

✓ Deployed to production in 4.2s▏

cassette default 2 files · 4.2s
Feature row · 560px Static
Courier — Push Fig. 01

$ courier push

Bundling views/ and public/…

↑ views/canopy/hero.canvas

↑ public/styles/global.css

Uploading cassette…

✓ Deployed to production in 4.2s▏

cassette default 2 files · 4.2s
Hero figure · 880px Static
Courier — Push Fig. 01

$ courier push

Bundling views/ and public/…

↑ views/canopy/hero.canvas

↑ public/styles/global.css

Uploading cassette…

✓ Deployed to production in 4.2s▏

cassette default 2 files · 4.2s

Animated · loop

Feature row · 560px
Courier — Push Fig. 01

$ courier push

Bundling views/ and public/…

↑ views/canopy/hero.canvas

↑ public/styles/global.css

Uploading cassette…

✓ Deployed to production in 4.2s▏

cassette default 2 files · 4.2s
v2

Local to cloud

loop runs on screen

Files in views/ tick off in sequence as packets travel a dashed link to the project. Shows the two places at once rather than the command.

views/components/visuals/courier-sync/v2.html

Static · three placements

Bento card · 320px Static
Courier — Sync Fig. 02

Local · views/

canopy/hero.canvas
layouts/home.html
styles/global.css

Blutui · project

Northwind Studio

northwind.blutui.com

Live

courier dev 3 files synced
Feature row · 560px Static
Courier — Sync Fig. 02

Local · views/

canopy/hero.canvas
layouts/home.html
styles/global.css

Blutui · project

Northwind Studio

northwind.blutui.com

Live

courier dev 3 files synced
Hero figure · 880px Static
Courier — Sync Fig. 02

Local · views/

canopy/hero.canvas
layouts/home.html
styles/global.css

Blutui · project

Northwind Studio

northwind.blutui.com

Live

courier dev 3 files synced

Animated · loop

Feature row · 560px
Courier — Sync Fig. 02

Local · views/

canopy/hero.canvas
layouts/home.html
styles/global.css

Blutui · project

Northwind Studio

northwind.blutui.com

Live

courier dev 3 files synced
c1

Terminal stream

cutout

once one pass, holds

Cutout on a citron ground: v1's transcript in the terminal window itself, cropped at the right and running off the bottom. courier push is typed at the prompt, the upload lines land, the cassette bar fills and the deploy line confirms. The moment is keyboard rather than pointer — the block caret types, then reappears at a fresh prompt. A second, dim pane running courier dev sits behind the crop.

views/components/visuals/courier-sync/c1.html

Static · three placements

Bento card · 320px Static
takahe — courier — 96×28

~/dev/takahe ❯ courier push

Bundling views/ and public/…

↑views/layouts/default.html2.4 KB

↑views/canopy/hero.canvas1.1 KB

↑public/styles/global.css18.7 KB

↑public/scripts/app.js9.3 KB

Uploading cassette ██████████ ██████████ 18% 76% 100%

✓ Deployed to production in 4.2s

  https://takahe.blutui.site

 

~/dev/takahe ❯

~/dev/takahe ❯ courier dev

Watching views/ and src/…

 

  https://localhost:8080

Feature row · 560px Static
takahe — courier — 96×28

~/dev/takahe ❯ courier push

Bundling views/ and public/…

↑views/layouts/default.html2.4 KB

↑views/canopy/hero.canvas1.1 KB

↑public/styles/global.css18.7 KB

↑public/scripts/app.js9.3 KB

Uploading cassette ██████████ ██████████ 18% 76% 100%

✓ Deployed to production in 4.2s

  https://takahe.blutui.site

 

~/dev/takahe ❯

~/dev/takahe ❯ courier dev

Watching views/ and src/…

 

  https://localhost:8080

Hero figure · 880px Static
takahe — courier — 96×28

~/dev/takahe ❯ courier push

Bundling views/ and public/…

↑views/layouts/default.html2.4 KB

↑views/canopy/hero.canvas1.1 KB

↑public/styles/global.css18.7 KB

↑public/scripts/app.js9.3 KB

Uploading cassette ██████████ ██████████ 18% 76% 100%

✓ Deployed to production in 4.2s

  https://takahe.blutui.site

 

~/dev/takahe ❯

~/dev/takahe ❯ courier dev

Watching views/ and src/…

 

  https://localhost:8080

Animated · once

Feature row · 560px
takahe — courier — 96×28

~/dev/takahe ❯ courier push

Bundling views/ and public/…

↑views/layouts/default.html2.4 KB

↑views/canopy/hero.canvas1.1 KB

↑public/styles/global.css18.7 KB

↑public/scripts/app.js9.3 KB

Uploading cassette ██████████ ██████████ 18% 76% 100%

✓ Deployed to production in 4.2s

  https://takahe.blutui.site

 

~/dev/takahe ❯

~/dev/takahe ❯ courier dev

Watching views/ and src/…

 

  https://localhost:8080

Tune · ground and placement
Ground
Place

Overrides none — the file's own defaults

c2

Create a project

cutout

once one pass, holds

Cutout on a navy ground: blutui courier create in the terminal. The command is typed, the COURIER banner paints in the brand gradient, the wizard asks for a project handle and the handle is typed over the placeholder. The frame crops the banner's last letter. Rest is the beat before Return.

views/components/visuals/courier-sync/c2.html

Static · three placements

Bento card · 320px Static
blutui — courier create — 96×28

…/Dev/blutui

→ blutui courier create

 

 ██████╗ ██████╗ ██╗   ██╗██████╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██║██╔════╝██╔══██╗
██║     ██║   ██║██║   ██║██████╔╝██║█████╗  ██████╔╝
██║     ██║   ██║██║   ██║██╔══██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝╚██████╔╝██║  ██║██║███████╗██║  ██║
 ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

 

? What is your project handle? › my-projecttakahe

Feature row · 560px Static
blutui — courier create — 96×28

…/Dev/blutui

→ blutui courier create

 

 ██████╗ ██████╗ ██╗   ██╗██████╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██║██╔════╝██╔══██╗
██║     ██║   ██║██║   ██║██████╔╝██║█████╗  ██████╔╝
██║     ██║   ██║██║   ██║██╔══██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝╚██████╔╝██║  ██║██║███████╗██║  ██║
 ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

 

? What is your project handle? › my-projecttakahe

Hero figure · 880px Static
blutui — courier create — 96×28

…/Dev/blutui

→ blutui courier create

 

 ██████╗ ██████╗ ██╗   ██╗██████╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██║██╔════╝██╔══██╗
██║     ██║   ██║██║   ██║██████╔╝██║█████╗  ██████╔╝
██║     ██║   ██║██║   ██║██╔══██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝╚██████╔╝██║  ██║██║███████╗██║  ██║
 ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

 

? What is your project handle? › my-projecttakahe

Animated · once

Feature row · 560px
blutui — courier create — 96×28

…/Dev/blutui

→ blutui courier create

 

 ██████╗ ██████╗ ██╗   ██╗██████╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██║██╔════╝██╔══██╗
██║     ██║   ██║██║   ██║██████╔╝██║█████╗  ██████╔╝
██║     ██║   ██║██║   ██║██╔══██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝╚██████╔╝██║  ██║██║███████╗██║  ██║
 ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

 

? What is your project handle? › my-projecttakahe

Tune · ground and placement
Ground
Place

Overrides none — the file's own defaults